<!--  -->
<template>
  <article>
    <div id="app" class="maxbg" v-cloak>
      <transition name="fade">
        <div class="pageBody" style="height: 100%">
          <div style="flex: 1">
            <div class="bgc">
              <div class="contentInfo">
                <div class="tabBar">加入芝士医生</div>
                <!-- 输入框 -->
                <div class="input_content">
                  <div class="phone">
                    <p class="labelInfo">手机号</p>
                    <p class="inputInfo">
                      <input
                        type="text"
                        ref="phone"
                        placeholder="请输入手机号"
                      />
                    </p>
                    <span
                      style="color: red; font-size: 0.24rem"
                      v-show="isShowErrorInfo"
                      >{{ errorInfo }}</span
                    >
                  </div>

                  <div class="password">
                    <p class="labelInfo">验证码</p>
                    <p class="inputInfo inputPassword">
                      <input
                        ref="password"
                        type="text"
                        placeholder="请输入验证码"
                        @input="inputChange"
                      />
                      <span class="code" v-if="isShow" @click="getCode"
                        >获取验证码</span
                      >
                      <span class="code" v-else>{{ num }}</span>
                    </p>
                    <span
                      style="color: red; font-size: 0.24rem"
                      v-show="isShowCodeInfo"
                      >{{ codeErrorInfo }}</span
                    >
                  </div>
                </div>
                <!-- button -->
                <div class="button" @click="joinNow">立即加入</div>
                <!-- 协议 -->
                <div class="agreement">
                  <input
                    type="checkbox"
                    ref="checkbox"
                    @click="getCheckValue"
                  />
                  <label for="killOrder2"
                    >我已阅读并同意
                    <a
                      class="link"
                      href="https://cdn.zmylschool.com/zmylschool/html/cheersDoctorAgreement.html"
                      >《用户使用协议》</a
                    >
                    和
                    <a
                      class="link"
                      href="https://cdn.zmylschool.com/zmylschool/html/cheersDoctorSecretright.html"
                      >《隐私协议》</a
                    >
                  </label>
                  <div class="privacy" v-show="!isCheck">
                    <p>请阅读并同意隐私政策</p>
                    <p class="triangle"></p>
                  </div>
                </div>
              </div>
            </div>
            <div class="describe">
              <div class="top">芝士医生</div>
              <div class="content">
                <p>芝士医生 – 探索医学的奥秘</p>
                <p>
                  欢迎来到芝士医生医学学习平台，您的医学知识之家！
                  无论您是专业医学从业者、医学学生还是对医学领域充满兴趣，我们为您提供一站式的学习体验，助您在医学领域更上一层楼。
                </p>
                <p>—— 主要功能</p>
                <p>
                  医学课程：我们提供广泛的医学课程，涵盖从基础知识到前沿研究的各个方面。课程内容丰富多样，包括
                </p>

                <p>- 视频讲解：由医学领域专家呈现的精彩视频，生动易懂。</p>
                <p>- PPT课件：详细的幻灯片，帮助您深入学习课程内容。</p>
                <p>- 课堂笔记：整理的笔记，方便复习和记忆。</p>

                <p>- 随堂练习：巩固学习成果，检验知识掌握情况。</p>

                <p>- 关联动画：生动有趣的动画，帮助您理解复杂概念。</p>

                <p>
                  医学题库：准备执业医师考试、护理考试还是在校生学期考试？我们拥有各大题库，涵盖多种题型，帮助您高效备考，包括：
                </p>

                <p>- 医学专业：覆盖广泛的考试科目，助您踏入医疗行业。</p>
                <p>- 题目题型：丰富的题型，多维度训练，帮您锐意进取。</p>
                <p>- 错题集/收藏：帮助您整理考题，错题合集反复训练。</p>
                <p>
                  医学数字标本库：通过3D标本、数字切片和电镜图，您可以近距离观察医学世界，包含：
                </p>
                <p>- 3D标本：逼真的3D模型，让您深入了解人体结构。</p>

                <p>- 数字切片：清晰的切片图像，带您进入微观世界。</p>

                <p>- 电镜图：探索细胞层面的神秘领域。</p>
                <p>- 各类标注信息：详尽的解释和标注，助您理解每一细节。</p>
                <p>
                  -
                  各科医学专业数字标本大合集：涵盖多个医学领域，满足您的好奇心。
                </p>
                <p>
                  无论您是想要提升医学知识，备战考试，还是纯粹对医学产生浓厚兴趣，我们的医学学习平台都将是您最佳的学习伴侣。下载我们的App，开启医学之旅吧！
                </p>
              </div>
            </div>
          </div>
          <!-- <div class="bottonFooter">
							<a href="market://details?id=com.zmyl.doctor">下载App</a>
						</div> -->
          <a href="https://it.zmylclould.com:19000/download" id="link"
            >芝士医生</a
          >

          <!-- modal提示 -->
          <div id="alertMessage" v-if="isMsgShow">{{ msg }}</div>
        </div>
      </transition>
    </div>
  </article>
</template>

<script>
export default {
  data() {
    return {
      isShow: true,
      num: 59,
      errorInfo: "手机号不能为空",
      isShowErrorInfo: false,
      isCheck: false,
      isShowPrompt: false,
      codeErrorInfo: "请输入验证码",
      isShowCodeInfo: false,
      linkData: {},
      timer: null,
      msg: "",
      isMsgShow: false,
      code: "",
    };
  },
  components: {},
  methods: {
    inputChange() {
      const value = this.$refs.password.value;
      if (value.length > 6) {
        const val = value.slice(0, 6);
        this.$refs.password.value = val;
      }
    },
    // 获取验证码
    getCode() {
      const value = this.$refs.phone.value;
      const reg = /^1[3456789]\d{9}$/;
      // console.log(value)
      if (!value) {
        this.isShowErrorInfo = true;
        this.errorInfo = "请填写手机号";
      } else if (!reg.test(value)) {
        this.isShowErrorInfo = true;
        this.errorInfo = "手机号格式不正确";
      } else {
        this.isShowErrorInfo = false;
        this.errorInfo = "";
        this.isShow = false;

        const params = { p: value };
        this.$http
          .getSmsVc(params)
          .then((res) => {
            if (res.flag == 0) {
            } else {
              this.alertmess(res.message);
            }
          })
          .catch((err) => {
            this.alertmess(err.response.data.message);
            //   ElMessage.warning(err.response.data.message);
          });

        this.timer = setInterval(() => {
          if (this.num === 1) {
            clearInterval(this.timer);
            this.isShow = true;
            this.num = 59;
          }
          this.num--;
        }, 1000);
      }
    },
    // 立即加入
    joinNow() {
      const phone = this.$refs.phone.value;
      const password = this.$refs.password.value;
      const reg = /^1[3456789]\d{9}$/;
      if (!phone) {
        this.isShowErrorInfo = true;
        this.errorInfo = "手机号不能为空";
        return;
      } else if (!reg.test(phone)) {
        this.isShowErrorInfo = true;
        this.errorInfo = "手机号格式不正确";
        return;
      } else {
        this.isShowErrorInfo = false;
        this.errorInfo = "";
      }
      if (!password) {
        this.isShowCodeInfo = true;
        this.codeErrorInfo = "验证码不能为空";
        return;
      } else {
        this.isShowCodeInfo = false;
        this.codeErrorInfo = "";
      }
      if (!this.isCheck) return;
      this.code = this.$route.query.invitationCode;
      const data = {
        phoneNum: phone,
        code: this.code,
        verification: password,
      };

      this.$http
        .personageInvite(data)
        .then((res) => {
          if (res.flag === 0) {
            const from = this.$route.query.from;
            const str = {
              type: "joinSuccess",
              data: {},
            };
            if (from == "android") {
              window.android.postMessage(JSON.stringify(str)); //安卓
            } else if (from == "ios") {
              window.prompt("postMessage", JSON.stringify(str)); //ios
            } else {
              window.location.href = "/download";
            }
          } else {
            this.alertmess(res.message);
          }
        })
        .catch((err) => {
          this.alertmess(err.response.data.message);
          //   ElMessage.error(err.response.data.message);
        });
    },
    getCheckValue(e) {
      this.isCheck = e.target.checked;
    },
    alertmess(msg) {
      this.isMsgShow = true;
      this.msg = msg;
      // $("#alertMessage").html(msg); // 填入要显示的文字
      // $("#alertMessage").show(); // 显示弹框
      setTimeout(() => {
        // 倒计时
        // $("#alertMessage").html(""); // 清空文本
        // $("#alertMessage").hide(); // 隐藏弹框
        this.isMsgShow = false;
        this.msg = "";
        this.$forceUpdate();
      }, 3000); // 3秒
    },
    // 获取参数
    getParams(value) {
      let data = {};
      // console.log(value)
      if (value) {
        const arr = value.split("?").pop().split("&&");
        for (let i = 0; i < arr.length; i++) {
          const val = arr[i].split("=");
          data[val[0]] = val[1];
        }
      }
      for (const key in data) {
        if (key == "promotedCode") {
          this.linkData[key] = data[key];
        }
      }
    },
  },
  mounted: function () {
    const hrefParams = location.search;
    // this.getParams(hrefParams);
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
};
</script>

<style lang='scss' scoped>
.bgc {
  height: 10rem;
  background: url("@/assets/images/bgc.png") no-repeat center top;
  background-position-y: 0;
  background-size: 100% 100%;
}
.pageBody {
  width: 100%;
  /* height: 38.41rem; */
  /* height: 10rem; */
  height: 100%;
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.contentInfo {
  width: 6.86rem;
  height: 7.18rem;
  background-color: #fff;
  border-radius: 0.24rem;
  position: absolute;
  top: 2.68rem;
  left: 50%;
  transform: translateX(-50%);
  padding: 0 0.32rem;
}
.bottonFooter {
  width: 100%;
  height: 1.12rem;
  background-color: #fff;
  position: fixed;
  bottom: 0;
  padding-top: 0.2rem;
}
.bottonFooter p {
  width: 6.86rem;
  height: 0.8rem;
  border-radius: 0.8rem;
  background-color: #ff9514;
  color: #fff;
  font-size: 0.32rem;
  text-align: center;
  font-weight: 400;
  line-height: 0.8rem;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.tabBar {
  background: url("@/assets/images/tabbg.png") no-repeat center top;
  background-position-y: 0;
  background-size: 100% 100%;
}
.contentInfo .tabBar {
  width: 3.48rem;
  height: 0.64rem;
  font-weight: 500;
  color: #cf2d14;
  text-align: center;
  line-height: 0.64rem;
  font-size: 0.32rem;
  position: absolute;
  left: 50%;
  top: -0.05rem;
  transform: translateX(-50%);
  font-family: PingFang SC-Heavy, PingFang SC;
}
.contentInfo .input_content {
  width: 100%;
  margin-top: 1.4rem;
  font-size: 0.32rem;
  font-weight: 400;
}
.inputInfo {
  border-bottom: 1px solid #f6f6f6;
  margin-bottom: 0.2rem;
}
.inputInfo input {
  width: 70%;
  height: 0.6rem;
}
.inputInfo .code {
  color: #ff9514;
  font-size: 0.32rem;
  display: inline-block;
  /* width: 30%; */
  text-align: center;
}
.inputPassword {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
input::-webkit-input-placeholder {
  font-size: 0.28rem;
  color: #a9acb0;
}
.labelInfo {
  margin-bottom: 0.2rem;
  color: #3d3d3d;
}
.input_content .phone,
.input_content .password {
  /* padding: .2rem 0; */
  /* border-bottom: 1px solid #F6F6F6; */
  margin-bottom: 0.4rem;
}
.contentInfo .button {
  height: 0.96rem;
  border-radius: 0.96rem;
  background: linear-gradient(270deg, #ff9514 0%, #ffb254 98%);
  text-align: center;
  line-height: 0.96rem;
  color: #ffffff;
  font-size: 0.32rem;
  box-shadow: 0px 0.08rem 0px 0px
      rgba(237.0000010728836, 131.00000739097595, 47.0000009983778, 1),
    inset 0px -2px 0px 0px rgba(255, 168.27602237462997, 62.73455388844013, 1);
  margin-top: 0.6rem;
}
.agreement {
  text-align: center;
  color: #b7b7b7;
  margin-top: 0.4rem;
  position: relative;
}
.privacy {
  background-color: rgba(0, 0, 0, 0.6);
  position: absolute;
  color: #fff;
  padding: 0.1rem 0.2rem;
  /* border-radius: .4rem; */
  left: 0.3rem;
  top: 0.5rem;
}
.triangle {
  position: absolute;
  width: 0;
  height: 0;
  border-left: 0.2rem solid transparent;
  border-right: 0.2rem solid transparent;
  border-bottom: 0.2rem solid rgba(0, 0, 0, 0.6);
  top: -0.2rem;
  /* left: .01rem; */
}
.link {
  color: #ff9514;
}
.describe {
  padding: 0 0.32rem;
  width: 100%;
}
.top {
  background: url("@/assets/images/topBar.png") no-repeat center top;
  background-position-y: 0;
  background-size: 100% 100%;
}
.describe .top {
  width: 6.86rem;
  height: 1.62rem;
  /* position: absolute; */
  /* top: 10.2rem; */
  color: #ff9514;
  font-size: 0.32rem;
  text-align: center;
  padding-top: 0.48rem;
}
.content {
  width: 6.86rem;
  /* position: absolute; */
  /* top: 11.5rem; */
  color: #3d3d3d;
  padding: 0 0.32rem;
  font-size: 0.28rem;
  margin-bottom: 0.6rem;
}
.content p {
  line-height: 0.44rem;
}
.prompt {
  padding: 0.3rem 0.5rem;
  position: fixed;
  background-color: #f0f0f2;
  border-radius: 0.6rem;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#alertMessage {
  padding: 0.3rem 0.5rem;
  position: fixed;
  background-color: #f0f0f2;
  border-radius: 0.6rem;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#link {
  position: fixed;
  top: 0.2rem;
  left: 0.2rem;
  font-size: 0.4rem;
  opacity: 0;
}
</style>
